<template>
  <div class="test-editors-container">
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <div class="test-content">
      <div class="page-header glass-effect">
        <h1 class="page-title">
          <i class="fa fa-code"></i>
          编辑器智能提示测试
        </h1>
        <p class="page-subtitle">测试Ansible Inventory和Command编辑器的智能提示隔离</p>
      </div>

      <div class="editors-container">
        <!-- Inventory编辑器 -->
        <div class="editor-section glass-effect">
          <div class="editor-header">
            <h3><i class="fa fa-server"></i> Ansible Inventory编辑器</h3>
            <p>应该提示: ansible_host, ansible_user, ansible_port 等</p>
          </div>
          <div ref="inventoryEditor" class="monaco-container"></div>
        </div>

        <!-- Command编辑器 -->
        <div class="editor-section glass-effect">
          <div class="editor-header">
            <h3><i class="fa fa-terminal"></i> Ansible Command编辑器</h3>
            <p>应该提示: 模块名、主机组、命令选项等</p>
          </div>
          <div ref="commandEditor" class="monaco-container"></div>
        </div>
      </div>

      <div class="test-instructions glass-effect">
        <h3>测试说明</h3>
        <ul>
          <li><strong>Inventory编辑器</strong>: 输入 "web01 ansible_" 应该提示 ansible_host, ansible_user 等</li>
          <li><strong>Command编辑器</strong>: 输入 "ansible all -m " 应该提示模块名如 ping, command, shell 等</li>
          <li>两个编辑器的智能提示应该完全独立，不会互相干扰</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import * as monaco from 'monaco-editor'
import { registerAnsibleInventoryLanguage, unregisterAnsibleInventoryLanguage, getDefaultAnsibleContent } from '@/utils/ansible-language.js'
import { registerAnsibleCommandLanguage, unregisterAnsibleCommandLanguage, getDefaultAnsibleCommand } from '@/utils/ansible-command-language.js'

// 编辑器引用
const inventoryEditor = ref(null)
const commandEditor = ref(null)

// 编辑器实例
let inventoryEditorInstance = null
let commandEditorInstance = null

// 初始化Inventory编辑器
const initInventoryEditor = () => {
  if (!inventoryEditor.value) return

  try {
    registerAnsibleInventoryLanguage()
    
    inventoryEditorInstance = monaco.editor.create(inventoryEditor.value, {
      value: getDefaultAnsibleContent(),
      language: 'ansible-inventory',
      theme: 'ansible-dark',
      automaticLayout: true,
      minimap: { enabled: false },
      scrollBeyondLastLine: false,
      fontSize: 14,
      lineNumbers: 'on',
      wordWrap: 'on',
      quickSuggestions: {
        other: true,
        comments: false,
        strings: true
      },
      suggestOnTriggerCharacters: true,
      acceptSuggestionOnCommitCharacter: true,
      acceptSuggestionOnEnter: 'on',
      tabCompletion: 'on'
    })

    console.log('Inventory编辑器初始化成功')
  } catch (error) {
    console.error('Inventory编辑器初始化失败:', error)
  }
}

// 初始化Command编辑器
const initCommandEditor = () => {
  if (!commandEditor.value) return

  try {
    registerAnsibleCommandLanguage()
    
    commandEditorInstance = monaco.editor.create(commandEditor.value, {
      value: getDefaultAnsibleCommand(),
      language: 'ansible-command',
      theme: 'ansible-command-dark',
      automaticLayout: true,
      minimap: { enabled: false },
      scrollBeyondLastLine: false,
      fontSize: 14,
      lineNumbers: 'on',
      wordWrap: 'on',
      quickSuggestions: {
        other: true,
        comments: false,
        strings: true
      },
      suggestOnTriggerCharacters: true,
      acceptSuggestionOnCommitCharacter: true,
      acceptSuggestionOnEnter: 'on',
      tabCompletion: 'on'
    })

    console.log('Command编辑器初始化成功')
  } catch (error) {
    console.error('Command编辑器初始化失败:', error)
  }
}

// 清理编辑器
const cleanupEditors = () => {
  if (inventoryEditorInstance) {
    inventoryEditorInstance.dispose()
    inventoryEditorInstance = null
  }
  
  if (commandEditorInstance) {
    commandEditorInstance.dispose()
    commandEditorInstance = null
  }
  
  unregisterAnsibleInventoryLanguage()
  unregisterAnsibleCommandLanguage()
}

onMounted(() => {
  nextTick(() => {
    initInventoryEditor()
    initCommandEditor()
  })
})

onBeforeUnmount(() => {
  cleanupEditors()
})
</script>

<style scoped>
.test-editors-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
  z-index: 1;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite;
  opacity: 0.6;
}

.stars2 {
  background-image: 
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.9), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 25s infinite;
  opacity: 0.4;
}

.stars3 {
  background-image: 
    radial-gradient(1px 1px at 10px 10px, #fff, transparent),
    radial-gradient(2px 2px at 160px 80px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 30s infinite;
  opacity: 0.3;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.test-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
}

.page-title {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(164, 244, 186, 0.5);
}

.page-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.editors-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.editor-section {
  padding: 20px;
  border-radius: 15px;
  min-height: 400px;
}

.editor-header {
  margin-bottom: 15px;
}

.editor-header h3 {
  color: #ffffff;
  margin: 0 0 5px 0;
  font-size: 1.3rem;
}

.editor-header p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: 0.9rem;
}

.monaco-container {
  height: 350px;
  border: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.test-instructions {
  padding: 20px;
  border-radius: 15px;
}

.test-instructions h3 {
  color: #ffffff;
  margin-bottom: 15px;
}

.test-instructions ul {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.test-instructions li {
  margin-bottom: 8px;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(164, 244, 186, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
</style>
